<template>
  <div
    :id="idString"
    class="gray"
  >
  </div>
</template>

<script>
  import * as echarts from 'echarts'
  let PieColor = [
    new echarts.graphic.LinearGradient(0, 0, 1, 0, [
      {
        offset: 0,
        color: '#F3B407',
      },
      {
        offset: 1,
        color: '#F27011',
      },
    ]),
    new echarts.graphic.LinearGradient(0, 0, 1, 0, [
      {
        offset: 0,
        color: '#82BFFF',
      },
      {
        offset: 1,
        color: '#0D4DF2',
      },
    ]),
    new echarts.graphic.LinearGradient(0, 0, 1, 0, [
      {
        offset: 0,
        color: '#9C99FF',
      },
      {
        offset: 1,
        color: '#33317E',
      },
    ]),

    '#009DFF',
    '#00e473',
    '#395CFE',
    '#2EC7CF',
    '#733DFF',
    '#966EFF',
    '#7fdefe',
  ]

  let colorList = PieColor
  export default {
    props: {
      textTitle: {
        type: String,
        default: '数量'
      },
      seriesData: {
        type: Array,
        default: () => {
          return [
            {
              name: '任务资源金额',
              subName: '任务订单(元)',
              value: 0
            },
            {
              name: '模拟资源金额',
              subName: '模型订单(元)',
              value: 0
            }
          ]
        },
      }
    },
    data () {
      return {
        idString: '',
        Chart: null,
        index: 0
      }
    },
    created () {
      this.idString = 'chart_' + Math.random().toString(32).substr(6)
    },
    watch: {
      info: {
        handler: function (val) {
          if (val && this.Chart) {
            this.$nextTick(() => {
              this.setChartOption()
            })
          }
        },
        deep: true,
        immediate: true,
      },
    },
    computed: {
      chartOption () {
        let option = {
          legend: {
            show: true,
            orient: 'horizontal',
            // 禁止 legend 移入事件
            selectedMode: false,
            top: '10%',
            left: '42%',
            width: 50,
            height: 80,
            itemWidth: 6,
            itemHeight: 40,
            itemGap: 10,
            formatter: function (params) {
              // 获取数据
              let data = option.series[0].data
              const current = data.filter(v => v.name === params)[0]
              return `{labelName|${params}}\n{labelMark|${current.subName}}{countValue|${current.value}}`
            },
            textStyle: {
              fontSize: 14,
              rich: {
                labelName: {
                  fontSize: 14,
                  lineHeight: 15,
                  fontWeight: 700,
                  color: ' #333333',
                },
                labelMark: {
                  fontSize: 14,
                  lineHeight: 20,
                  color: '#999999',
                },
                countValue: {
                  fontSize: 30,
                  color: '#333333',
                  fontWeight: 700,
                  padding: [0, 0, 10, 98],
                  lineHeight: 20,
                },
              },
            },
          },
          // title: {
          //   // text: `${this.info ? this.info.textTitle : '数量'}占比`,
          //   // subtext: '80%',
          //   textAlign: 'center',
          //   textStyle: {
          //     color: '#666666',
          //     fontSize: 12,
          //   },
          //   // subtextStyle: {
          //   //   fontSize: 20,
          //   //   color: ['#333333'],
          //   // },
          //   x: '19%',
          //   y: '40%',
          // },
          series: [
            // {
            //   itemStyle: {
            //     normal: {
            //       color: function (params) {
            //         return colorList[params.dataIndex]
            //       },
            //       borderColor: '#ffffff',
            //       borderWidth: 2,
            //       borderRadius: 4,
            //     },
            //   },
            //   type: 'pie',
            //   radius: ['75%', '95%'],
            //   center: ['20%', '50%'],
            //   avoidLabelOverlap: false,
            //   labelLine: {
            //     normal: {
            //       lineStyle: {
            //         color: '#34569D',
            //       },
            //     },
            //   },
            //   label: {
            //     normal: {
            //       show: false,
            //     },
            //   },
            //   emphasis: {
            //     scaleSize: 4,
            //   },
            //   data: this.info ? this.info.seriesData : [],
            // },
            {
              itemStyle: {
                normal: {
                  color: function (params) {
                    return colorList[params.dataIndex]
                  },
                  borderColor: '#ffffff',
                  borderWidth: 2,
                  borderRadius: 4,
                },
              },
              name: 'Access From',
              type: 'pie',
              radius: ['75%', '95%'],
              center: ['20%', '50%'],
              avoidLabelOverlap: false,
              label: {
                show: false,
                formatter: params => {
                  /* 超过6个字符换行 */
                  if (params.name.length > 6) {
                    const start = params.name.slice(0, 6)
                    const end = params.name.slice(6)
                    return `{mTitle|${start}\n${end}} \n\n {mPercent|${params.percent}%}`
                  }
                  return `{mTitle|${params.name}} \n\n {mPercent|${params.percent}%}`
                },
                position: 'center',
                rich: {
                  mTitle: {
                    fontSize: 18,
                    fontWeight: 700,
                  },
                  mPercent: {
                    fontSize: 20,
                    fontWeight: 700,
                  }
                }
              },
              emphasis: {
                label: {
                  show: true,
                  fontSize: '14',
                  fontWeight: 'bold'
                }
              },
              labelLine: {
                show: false
              },
              data: this.info ? this.info.seriesData : []
            }
          ],
        }
        return option
      },
      info () {
        return {
          textTitle: this.textTitle,
          seriesData: JSON.parse(JSON.stringify(this.seriesData))
        }
      },
    },
    async mounted () {
      this.Chart = echarts.init(document.getElementById(this.idString))
      window.addEventListener('resize', this.draw)
    },
    beforeDestroy () {
      window.removeEventListener('reisze', this.draw)
    },
    methods: {
      draw () {
        if (this.Chart) {
          this.Chart.resize()
        }
      },
      setChartOption () {
        this.Chart.setOption(this.chartOption)
        this.getDefaultSelected()
      },
      getDefaultSelected () {
        this.Chart.dispatchAction({
          type: 'highlight',
          seriesIndex: 0,
          dataIndex: 0
        })
        this.Chart.on('mouseover', e => {
          console.log('进入', this.index)
          if (e.dataIndex !== this.index) {
            this.Chart.dispatchAction({
              type: 'downplay',
              seriesIndex: 0,
              dataIndex: this.index
            })
          }
        })
        this.Chart.on('mouseout', e => {
          this.index = e.dataIndex
          console.log('离开', this.index)
          this.Chart.dispatchAction({
            type: 'highlight',
            seriesIndex: 0,
            dataIndex: this.index
          })
        })
      }
    },
  }
</script>

<style lang="scss" scoped>
.gray {
  // margin-top: 20px;
  height: 230px;
  background: linear-gradient(90deg, #ffffff, #f5f6f8 100%);
  margin: 0 20px;
}
</style>
